<template>
<div>
	<Card  dis-hover>
		<p slot="title">文章管理({{ ['', '公司资讯', '微课堂'][systemType] }})</p>
		<div pd2>
			<p>
				<Button size="small" @click="handleShowCreateModal(null)">新增文章</Button>
				<Button size="small" mgl1 @click="handleDeleteBatch">批量删除</Button>
				<Button size="small" mgl1 @click="handleAuditBatch">批量审核</Button>
			</p>
			<AutoTable :ref="tableRef" action="/api/services/app/Article/Search" :columns="columns" :query="query" :buttons="buttons" mgt1></AutoTable>
		</div>
	</Card>

	<Modal v-model="showModal" :title="this.model.id?'编辑文章':'添加文章'" width="75" :mask-closable="false">
		<Article v-if="showModal" :ref="articleRef" :value="model"></Article>
		
        <div slot="footer">
            <Button type="primary" @click="handleSave">{{this.model.id?'更新':'保存'}}</Button>
            <Button @click="showModal=false">取消</Button>
        </div>
	</Modal>
</div>
</template>

<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../../lib/abpbase';
import AutoTable from "@common/components/AutoTable.vue";
import Article from '../../../components/common/article.vue'

@Component({
	components:{ AutoTable, Article }
})
export default class ArticleManager extends AbpBase {
	@Prop({type:Number,default:-1}) systemType:Number;
	showModal:boolean=false;
	editModalShow:boolean=false;
	articleRef:string = this.getRandomRef('article')
	tableRef:string = this.getRandomRef('table')
	model:any = this.getDefaultModel()
	getDefaultModel() {
		return {
			title: '',
			tags: [],
			picture: '',
			pictures: [],
			description: '',
			content: '',
			author: '',
			source: '',
			status: 0
		}
	}
	get buttons() {
		return ['search','search_all']
	}
	get query() {
		return { // 查询条件
			systemType: { type: 'none', default: this.systemType, visible: false },
			searchTarget: { type: "select", default: "title", options: [
					{ value: "title", label: "文章标题" },
					{ value: "tag", label: "文章标签" },
					{ value: "author", label: "作者" },
					{ value: "source", label: "来源" }
			] },
			search: { type: "input", label: "", placeholder: "关键字" },
			status: { type: "select", label: "状态:", default: -1, placeholder: "未选择", options: [
					{ value: -1, label: "所有" },
					{ value: 0, label: "草稿" },
					{ value: 1, label: "待审核" },
					{ value: 2, label: "审核通过" }
			] },
		};
	}
	get columns() {
		return [
			{
				type: 'selection', width: 50, align: 'center'
			},
			{
				title: '文章标题', align: 'center', key: 'title'
			},
			{
				title: '状态', align: 'center', width: 100, render: (h, params) => {
					return h('div', ['草稿', '待审核', '审核通过'][params.row.status]);
				}
			},
			{
				title: '评论数', align: 'center', width: 100, key: 'commentCount'
			},
			{
				title: '可见', align: 'center', width: 50, render: (h, params) => {
					return h('Checkbox', { 
						props: { 
							value: params.row.enabled 
						},
						on: {
							'on-change': (value) => { this.handleChangeEnabled(params.row.id, value); }
						}
					});
				}
			},
			{
				title: '操作', key: 'action', align: 'center', width: 120, render: (h, params) => {
					return h('div', [
						h('Button', {
							props: { type: 'primary', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => {
								this.handleShowCreateModal(params.row)
							} }
						}, '编辑'),
						h('Button', {
							props: { type: 'error', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => {
								this.handleDelete(params.row.id);
							} }
						}, '删除')
					]);
				}
			}
		]
	}
	handleDelete(id:Number) {
		this.confirm('确认删除该文章吗？', async () => {
			var response = await this.post('Article/Delete', { id: id });
			if(response.success) {
				this.getpage();
			}
		});
	}
	async handleDeleteBatch() {
		(this.$refs[this.tableRef] as any).handleBatch(async (selectedItems) => {
			this.confirm(`确认要删除选中的${selectedItems.length}篇文章吗`, async () => {
				var ids = selectedItems.map(elem => elem.id);
				var response = await this.post('Article/Delete', { ids: ids });
				if(response.success) {
					this.getpage();
				}
			});
		});
	}
	async handleAuditBatch() {
		(this.$refs[this.tableRef] as any).handleBatch(async (selectedItems) => {
			this.confirm(`确认要批量审核选中的${selectedItems.length}篇文章吗`, async () => {
				var ids = selectedItems.map(elem => elem.id);
				var response = await this.post('Article/AuditArticle', { ids: ids });
				if(response.success) {
					this.getpage();
				}
			});
		});
	}
	handleShowCreateModal(item) {
		if(item == null) {
			this.model = this.getDefaultModel();
		}else {
			this.model = Object.assign({}, item);
		}
		this.showModal = true;
	}
	handleSave() {
		(this.$refs[this.articleRef] as any).validate(async () => {
			if(!this.model.id) {
				var response = await this.post('Article/Create', Object.assign({ systemType: this.systemType }, this.model));
				if(response.success) {
					this.showModal = false;
					this.getpage();
				}
			}else {
				var response = await this.put('Article/Update', this.model);
				if(response.success) {
					this.showModal = false;
					this.getpage();
				}
			}
		});
	}
	async handleChangeEnabled(id, value) {
		if(value == true) {
			await this.post('Article/Enabled', { id: id });
		}else {
			await this.post('Article/Disabled', { id: id });
		}
	}
	getpage() {
		(this.$refs[this.tableRef] as any).getData();
	}
}
</script>